{% extends 'layout/manage.html' %}
{% block css %}
    {% load dashboards %}
    <style>
        .table-right > tbody > tr > td.label-left {
            width: 90px;
        }

        .table-right > tbody > tr > td {
            border: 0;
        }

        .status-count {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .status-count .count {
            font-size: 25px;
        }

        .status-count a {
            text-decoration: none;
        }

        .user-item .title {
            margin-bottom: 20px;
        }

        .user-item .avatar, .top-10 .avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .user-item .text {
            line-height: 30px;
        }

        .top-10 .avatar {
            margin-right: 0;
        }

        .top-10 td {
            padding: 5px 10px;
        }

        .top-10 .table > tbody > tr > td {
            border-top: 0;
            border-bottom: 1px solid #ddd;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid" style="margin-top: 20px">
    <div class="row">
    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-bar-chart" aria-hidden="true"></i>
                新增问题趋势
            </div>
            <div class="panel-body">
                <div id="chart" style="width:100%;min-height:200px"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-quora" aria-hidden="true"></i>
                        问题
                    </div>
                    <div class="panel-body">
                        {% for i in problem_list %}
                            <div class="col-sm-4 status-count">
                                <a href="{% url 'issues' request.obj.0.0 %}?statused={{ i.0 }}">
                                    <div class="count">{{ i.0 }}</div>
                                    <div>{{ i.1 }}</div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        项目成员
                    </div>
                    <div class="panel-body user-item">
                        <div class="col-sm-12 title">创建者</div>
                        <div class="clearfix" style="margin-bottom: 30px;">
                            <div class="col-sm-4">
                                <div class="avatar">{{ this_creater.0.1.0|upper }}</div>
                                <div class="text">{{ this_creater.0.1 }}</div>
                            </div>
                        </div>
                        <div class="col-sm-12 title">参与者</div>
                        <div>
                            <div class="col-sm-4">
                                <div class="avatar">{{ this_creater.0.1.0|upper }}</div>
                                <div class="text">{{ this_creater.0.1 }}</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-cog title-icon"></i>
                详细
            </div>
            <div class="panel-body">
                <table class="table table-right">
                    <tbody>
                    <tr>
                        <td class="label-left">项目名称 ：</td>
                        <td>{{ request.obj.0.1 }}</td>
                    </tr>
                    <tr>
                        <td class="label-left">项目描述 ：</td>
                        <td>{{ request.obj.0.2 }}</td>
                    </tr>
                    <tr>
                        <td class="label-left">创建时间 ：</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td class="label-left">项目空间 ：</td>
                        <td> {% user_space request.obj.0.7 %}/{% user_space request.space_num %}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-list-ul" aria-hidden="true"></i>
                动态
            </div>
            <div class="panel-body top-10">
                <table class="table">
                    <tbody>
                    {% for i in now_recode %}
                        <tr>
                            <td style="width: 46px;">
                                <div class="avatar">{{ i.0.0|upper }}</div>
                            </td>
                            <td>
                                <div>{{ i.2 }}</div>
                                <div>指派
                                    <a href="{% url 'issues_detail' request.obj.0.0  i.3 %}">{{ i.0 }}</a>
                                    给 {{ i.2 }}
                                </div>
                            </td>
                            <td style="width: 156px;">
                                {{ item.create_datetime }}
                            </td>
                        </tr>

                    {% endfor %}
                    内容
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="http://cdn.highcharts.com.cn/highcharts/8.1.0/highcharts.js"></script>
    <script>
        var INIT_CHART = '{% url 'issues_chart' request.obj.0.0 %}';
        Highcharts.setOptions({
            global:{
                useUTC:false
            }
        })
        $(function () {
            initChart();
        })

        function initChart() {
            //chart
            var config = {
                title: {
                    text: null   // 不显示标题
                },
                legend: {
                    enabled: false // 关闭图例提示
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                yAxis: {
                    title: {
                        text: '问题数量' // Y周文本提示
                    }
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 60 * 60 * 24 * 1000, // 毫秒为单位
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%m-%d', this.value);
                        },
                        rotation: -30  // 倾斜30度
                    }
                },
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> 数量: {point.y} ',
                    xDateFormat: '%Y-%m-%d',
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                series: [{
                    data: []
                }]
            };
            $.ajax({
                url:INIT_CHART,
                type:'get',
                dataType: 'JSON',
                success:function (res) {
                    config.series[0].data = res.data;
                    var chart = Highcharts.chart('chart',config )
                }
            })

        }
    </script>
{% endblock %}